<template>
	<view class="">
		<topbg title='我的钱包'></topbg>
		<view class="infobox  main-box-style">
			<view class="islogin">
				<view class="infobox_left">
					<image class="u-m-r-20" src="/static/coin.jpg" mode=""></image>
					<view class="information main-text">
						<view class="information_top">
							<text class="u-p-lr-10">我的金币</text>

						</view>
						<view class="information_bottom small-title">
							<text class="u-p-lr-10">{{mycoin}}</text>
						</view>
					</view>
				</view>
				<!-- <u-icon  name='setting-fill'></u-icon> -->
				<image src="../../static/coinbag.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
			</view>
		</view>
		<view class="rechagerbox  u-p-30 u-radius-10 ">
			<text class="main-text">充值金额</text>
			<view class="coinbox u-m-t-40">
				<view class="u-radius-10" v-for="(item,index) in coinlist" @click="chosetc(index,item)"
					:class="current==index?'active':'coinbox_item'">
					<view class="coinbox_item_top">
						<image src="../../static/coin.jpg" mode=""></image>
						<text class="u-m-l-20">{{item.coin}}</text>
					</view>
					<text class="grey u-p-tb-20">{{item.money}}.00元</text>
				</view>
			</view>
			<view class="white submit u-radius-30 u-m-tb-100" @click="paycoin">
				提交
			</view>
		</view>
	</view>

</template>

<script>
	import topbg from '../../components/topbg.vue';
	export default {
		components:{
			topbg
		},
		data() {
			return {
				current: 0,
				coin:'',
				mycoin:0,
				coinlist: [{
						coin: 21,
						money: 20.00
					},
					{
						coin: 53,
						money: 50.00
					},
					{
						coin: 110,
						money: 100.00
					}
				]
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			chosetc(index,item) {
				console.log(item);
				this.current = index
				this.coin = item.money
				
			},
			init(){
				this.$userinfo().then(res=>{
					this.mycoin = res.data.data.money
				}).catch(err=>{
					console.log(err,'失败');
				})
			},
			paycoin(){
				this.$api.post('/Goods/Getbyorder',{
					paytype:1,
					num:this.coin||20
				}).then(res=>{
					
					this.wxpay(res.data)
				}).catch(err=>{
					console.log(err,'失败杀杀杀');
				})
			},
			
			wxpay(ordersn){
				this.$api.post('/Goods/payorder',{
					ordersn,
					paytype:1,
				}).then(res=>{
					this.$pay(res.data).catch(err=>{
						console.log(err);
					}).then(res=>{
						this.init()
					})
				}).catch(err=>{
					console.log(err,'失败杀杀杀');
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		@mixin flex {
			display: flex;
			align-items: center;
		}

		background-color: #f4f4f4;

		.infobox {
			margin: -170rpx auto 0;
			z-index: 9;
			position: relative;
			// margin: 40rpx auto;
			@include flex background-color: #fff;
			justify-content: space-between;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.islogin {
				.infobox_left {
					@include flex .information {
						display: flex;
						flex-direction: column;
						height: 80rpx;
						justify-content: space-around;
					}
				}

				width: 100%;
				@include flex justify-content: space-between;
			}
		}

		.rechagerbox {
			background-color: rgb(251, 251, 251);
			margin: 40rpx auto;
			box-sizing: border-box;
			width: 686rpx;

			.coinbox {
				@include flex;
				justify-content: space-between;

				.active {
					@include flex;
					flex-direction: column;
					justify-content: center;
					width: 30%;
					height: 200rpx;
					border: 1rpx solid #faaa02;
				}

				.coinbox_item {
					@include flex;
					flex-direction: column;
					justify-content: center;
					width: 30%;
					height: 200rpx;
					border: 1rpx solid #999;
				}

				.coinbox_item_top {
					@include flex;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
			.submit {
				background-color: $mian-bg;
				padding: 30rpx;
				text-align: center;
			}
		}
	}
</style>